<script setup lang="ts">
import { LedScreenCanvas, Rectangle } from "led-screen-canvas";
import { ref } from "vue";

const canvasRef = ref();

const onReady = () => {
  const rects = [];
  const size = 100;
  for (let r = 0; r < 500; r++) {
    for (let c = 0; c < 500; c++) {
      const rect = new Rectangle(c * size, r * size, size, size);
      rect.canActive = true;
      rect.canMove = true;
      rect.text = `Panel(${r},${c})`;
      rects.push(rect);
    }
  }
  canvasRef.value.addShapes(rects);
};
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-space wrap>
      <a-button type="primary" @click="canvasRef.start()">开始渲染</a-button>
      <a-button type="primary" status="danger" @click="canvasRef.stop()"
        >暂停渲染(避免多个画布导致浏览器卡顿)</a-button
      >
      <a-button @click="canvasRef.resetZoom()">缩放到最适合的大小</a-button>
      <a-button @click="canvasRef.zoom2RealSize()">缩放到原始尺寸</a-button>
    </a-space>
    <led-screen-canvas
      style="height: 400px; background-color: #dddddd"
      ref="canvasRef"
      @on-ready="onReady"
      @on-click="(shape, e) => shape?.setActive(!shape.isActive(e), e)"
      @on-shape-move-start="shape => shape.setZIndexTop()"
    />
  </a-space>
</template>

<style scoped lang="less"></style>
